<template>
	<div class="choice">
		<ul class="title-ul">
			<li :class="{'default':ischo==it.id}" v-for="it in types" :key="it.id" @click="ischo=it.id">
				{{it.name}}
				<span class="default-span"></span>
			</li>
		</ul>
		<Short1 v-if="ischo==1"></Short1>
		<Short2 v-if="ischo==2"></Short2>
	</div>
</template>

<script>
	import Short1 from './Short1'
	import Short2 from './Short2'
	export default{
		name:'Short',
		components:{Short1,Short2},
		data(){
			return{
				types:[
					{id:1,name:'周边短途'},
					{id:2,name:'当地体验'},
				],
				ischo:1
			}
		}
	}
</script>

<style scoped>
	.choice{
		width: 90%;
		margin: 0 auto;
	}
	.choice .title-ul{
		height: 1rem;
		background: #e7eaed;
		width: 100%;
		border-radius: 0.15rem;
		display: flex;
		align-items: center;
	}
	.choice .title-ul li{
		width: 50%;
		text-align: center;
		line-height: 1rem;
		font-size: 0.35rem;
		font-weight: bold;
		border-radius: 0.35rem;
	}
	.choice .title-ul .default{
		background: white;
	}
	.choice .title-ul .default .default-span{
		display: block;
		background: gold;
		height: 0.1rem;
		width: 1rem;
		border-radius: 0.25rem;
		margin: auto;
	}
	
</style>
